<script setup lang='ts'>
// vue3-js写法，校验可能不够精准，特别在 emit 时会非常明显
// defineProps({
//     money: {
//         type: Number,
//         required: true
//     },
//     car: {
//         type: String,
//         default: '小牛车'
//     }
// })
// vue-ts,也就是 泛型 写法 
/* 
    TS 的写法
    1. 调用 defineProps ，把泛型参数(描述父组件的props的类型) 传递，返回数据
    2. 解构返回来的数据，并且加上默认值
        注意：要使用这个功能，要在 vite.config.js 里面开启
        vue({
            reactivityTransform: true,
        })
        开启后，换色的静态不用管，是提醒你注意版本号的
        并且开启后，需要重启服务
*/
const { money, car = '小牛车' } = defineProps<{
    money: number,
    car?: string
}>()

// vue2： this.$emit('add',100)
// vue3
// const emit = defineEmits(['add', 'changeCar'])
// defineEmits配合ts 类型声明，可以实现更细粒度的校验
const emit = defineEmits<{
    (event: 'add', val: number): void,
    (event: 'changeCar'): void
}>()
</script>

<template>
    <div>我是子组件 - {{money}} - {{car}}</div>
    <button @click="emit('add',1000)">点我加钱</button>
    <button @click="emit('changeCar')">点我换车</button>
</template>